<template>
  <div class="articlemanage">
    <div class="articlemanage_main">
      <div class="card_top">
        <el-card :body-style="{ padding: '10' }" style="text-align: left;">
          <div class="taber">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="文章管理" name="1">
                <div>
                  <div style="width:100%">
                    <el-button
                      @click="openDialog(1)"
                      style="width: 100%;margin-bottom:8px;height:35px;line-height: 10px;"
                      ><div>新增文章</div></el-button
                    >
                  </div>
                  <el-table
                    v-loading="loading"
                    :data="tableData"
                    style="width: 100%"
                    :cell-style="rowClass"
                    :header-cell-style="headClass"
                    ref="singleTable"
                    @current-change="handleCurrentChange"
                    highlight-current-row
                  >
                    <!-- fixed -->
                    <el-table-column prop="date" label="ID">
                      <template slot-scope="scope">
                        <div>{{ scope.row.id }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="date" label="文章类型">
                      <template slot-scope="scope">
                        <div>{{ scope.row.type }}</div>
                      </template>
                    </el-table-column>

                    <el-table-column prop="title" label="文章标题">
                      <template slot-scope="scope">
                        <div style="text-align:center">
                          {{ scope.row.title }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="content" label="文章内容">
                      <template slot-scope="scope">
                        <div
                          style="max-height:136px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 6;-webkit-box-orient: vertical;"
                        >
                          {{ scope.row.content }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="coupon" label="创建时间/修改时间">
                      <template slot-scope="scope">
                        <div>
                          {{ scope.row.create_at }}
                        </div>
                        /
                        <div>
                          {{ scope.row.update_at }}
                        </div>
                      </template>
                    </el-table-column>

                    <el-table-column prop="active" label="操作">
                      <template slot-scope="scope">
                        <div>
                          <el-button
                            @click.native.prevent="openlook(scope.row)"
                            type="text"
                            size="small"
                            >查看
                          </el-button>
                          <el-button
                            @click.native.prevent="openDialog(scope.row)"
                            type="text"
                            size="small"
                            >修改
                          </el-button>
                          <el-popconfirm
                            style="margin-left:10px"
                            title="确定删除吗?"
                            @onConfirm="del(scope.row)"
                          >
                            <el-button slot="reference" type="text" size="small"
                              >删除
                            </el-button>
                          </el-popconfirm>
                        </div>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>
              <el-tab-pane label="文章分类管理" name="2">
                <div>
                  <div style="width:100%">
                    <el-button
                      @click="openadd()"
                      style="width: 100%;margin-bottom:8px;height:35px;line-height: 10px;"
                      ><div>新增文章分类</div></el-button
                    >
                  </div>
                  <el-table
                    :data="classList"
                    style="width: 100%;margin-bottom: 20px;"
                    row-key="id"
                    default-expand-all
                    :tree-props="{
                      children: 'data',
                      hasChildren: 'hasChildren'
                    }"
                  >
                    <el-table-column prop="class_name" label="分类名称">
                    </el-table-column>
                    <el-table-column prop="id" label="分类ID">
                    </el-table-column>
                    <el-table-column prop="pid" label="分类父级ID">
                    </el-table-column>
                    <el-table-column prop="action" label="操作">
                      <template slot-scope="scope">
                        <div>
                          <el-popconfirm
                            title="确定删除吗?"
                            @onConfirm="delclass(scope.row)"
                          >
                            <el-button slot="reference" type="text" size="small"
                              >删除
                            </el-button>
                          </el-popconfirm>
                        </div>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
          <!-- 新增/修改 -->
          <el-dialog
            :title="isadd ? '新增文章' : '修改文章'"
            width="50%"
            :visible.sync="dialogFormVisible"
            center
          >
            <div>
              <el-form
                :model="form"
                status-icon
                :before-close="handleClose"
                ref="ruleForm"
              >
                <el-form-item
                  label="文章类型"
                  prop="id"
                  :label-width="formLabelWidth"
                >
                  <el-cascader
                    v-model="form.type"
                    :options="options2"
                    :props="{
                      expandTrigger: 'hover',
                      children: 'data',
                      label: 'class_name',
                      value: 'id',
                      checkStrictly: true,
                      emitPath: false
                    }"
                    @change="handleChange"
                  ></el-cascader>
                </el-form-item>

                <el-form-item
                  label="文章标题"
                  prop="title"
                  :label-width="formLabelWidth"
                >
                  <el-input
                    v-model="form.title"
                    autocomplete="off"
                    placeholder="请输入文章标题"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="文章内容"
                  prop="content"
                  :label-width="formLabelWidth"
                >
                  <!-- <Tinymce ref="tin" :value="tinContent"></Tinymce>
                <el-button type="primary" @click="getTinContent"
                  >获取内容</el-button
                > -->
                  <editor-bar
                    v-model="form.content"
                    @change="getEditor"
                    ref="weditor"
                  ></editor-bar>
                </el-form-item>
              </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
              <el-button @click="handleClose">取 消</el-button>
              <el-button type="primary" @click="submitForm('ruleForm')"
                >确 定</el-button
              >
            </div>
          </el-dialog>
          <!-- 查看文章 -->
          <el-dialog
            title="查看详情"
            width="30%"
            :visible.sync="lookshow"
            center
          >
            <div>
              <el-form
                :model="lookinfo"
                status-icon
                label-position="top"
                :before-close="handleClose"
                ref="ruleForm"
              >
                <el-form-item prop="type" :label-width="formLabelWidth">
                  <div slot="label">
                    <span style="font-size: 18px;font-weight: 600;"
                      >文章类型:</span
                    >
                  </div>
                  <span>{{ lookinfo.classname }}</span>
                </el-form-item>

                <el-form-item prop="title" :label-width="formLabelWidth">
                  <div slot="label">
                    <span style="font-size: 18px;font-weight: 600;"
                      >文章标题:</span
                    >
                  </div>
                  <span>{{ lookinfo.title }}</span>
                </el-form-item>
                <el-form-item prop="content" :label-width="formLabelWidth">
                  <div slot="label">
                    <span style="font-size: 18px;font-weight: 600;"
                      >文章内容:</span
                    >
                  </div>
                  <div v-html="lookinfo.content"></div>
                </el-form-item>
                <el-form-item prop="create_at" :label-width="formLabelWidth">
                  <div slot="label">
                    <span style="font-size: 18px;font-weight: 600;"
                      >创建时间:</span
                    >
                  </div>
                  <span>{{ lookinfo.create_at }}</span>
                </el-form-item>
                <el-form-item prop="update_at" :label-width="formLabelWidth">
                  <div slot="label">
                    <span style="font-size: 18px;font-weight: 600;"
                      >修改时间:</span
                    >
                  </div>
                  <span>{{ lookinfo.update_at }}</span>
                </el-form-item>
              </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
              <el-button @click="lookshow = false">关 闭</el-button>
            </div>
          </el-dialog>
          <!-- 新增分类 -->
          <el-dialog
            title="新增分类"
            width="20%"
            :visible.sync="classshow"
            center
          >
            <div>
              <el-form
                :model="classinfo"
                status-icon
                label-position="right"
                :before-close="handleClose"
                ref="ruleForm"
              >
                <el-form-item label="分类名称" prop="name" label-width="90">
                  <el-input
                    style="width:213px"
                    v-model="classinfo.class_name"
                    autocomplete="off"
                    placeholder="请输入分类名称"
                  ></el-input>
                </el-form-item>
                <el-form-item label="一级分类" prop="type" label-width="90">
                  <el-select
                    v-model="classinfo.pid"
                    clearable
                    placeholder="请选择一级分类"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.class_name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                  <div style="color:red;margin-left:20px">
                    注:如新增一级分类,此项不选择
                  </div>
                </el-form-item>
              </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
              <el-button
                @click="
                  classshow = false;
                  classinfo = {};
                "
                >取 消</el-button
              >
              <el-button @click="doaddclass" type="primary">新 增</el-button>
            </div>
          </el-dialog>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
// import Tinymce from "@/components/Tinymce";
import EditorBar from "@/components/Editor/WangEditor";

import {
  getArticleList,
  updateArticle,
  doAddArticle,
  delArticle,
  lookArticle,
  getArticleClassList,
  delArtClass,
  addArtClass
} from "@/api/article/article";
export default {
  name: "articlemanage",
  components: {
    // Tinymce,
    EditorBar
  },
  data() {
    return {
      options: [],
      options2: [],

      classList: [
        // {
        //   id: 1,
        //   class_name: "一级分类1",
        //   pid: 0,
        //   data: [
        //     {
        //       id: 4548,
        //       class_name: "二级分类1",
        //       pid: 1
        //     }
        //   ]
        // }
      ],
      lookshow: false,
      classshow: false,
      arid: "",
      // tinContent: "",
      isadd: true,
      dialogFormVisible: false,
      form: {
        id: "", //id
        title: "", // 文章标题
        content: "", //文章内容
        type: "" //文章类型
      },
      classinfo: {
        class_name: "", // 分类名称
        pid: "" //一级分类
      },
      formLabelWidth: "120px",
      loading: false,
      activeName: "1",
      tableData: [
        {
          id: "", // id
          type: "", //文章类型
          title: "", // 文章标题
          content: "", //文章内容
          create_at: "", //创建时间
          update_at: "" //修改时间
        }
      ],
      lookinfo: {
        id: "", // id
        type: "", //文章类型
        classname: "", // 文章类型名称
        title: "", // 文章标题
        content: "", //文章内容
        create_at: "", //创建时间
        update_at: "" //修改时间
      }
    };
  },

  computed: {},
  created() {
    // console.log(this.$refs);
    // this.$refs.weditor.setText("6666");
    this.getArticleList();
    this.getArticleClassList();
  },
  mounted() {},
  methods: {
    handleChange(value) {
      console.log("选中", value);
    },
    doaddclass() {
      console.log("分类表单", this.classinfo);
      addArtClass({
        class_name: this.classinfo.class_name,
        pid: this.classinfo.pid
      })
        .then(res => {
          console.log(res);
          if (res.code === 200) {
            this.$message.success(res.msg);
            this.classinfo = {};
            this.classshow = false;
            this.getArticleClassList();
          } else {
            this.$message.info(res.msg);
          }
        })
        .catch(err => {
          this.$message.error(err.msg);
          console.log(err);
        });
    },
    openadd() {
      this.classshow = true;
    },
    getArticleClassList() {
      getArticleClassList()
        .then(res => {
          console.log("文章分类", res);
          this.classList = res.data;
          this.options = res.data;
          this.options2 = res.data.map(function(obj) {
            var rObj = {}; //obj为请求到的数据
            rObj.id = obj.id;
            rObj.class_name = obj.class_name;
            rObj.pid = obj.pid;
            rObj.data = obj.data;
            rObj.disabled = true;
            return rObj;
          });
          console.log(this.options2);
        })
        .catch(err => {
          console.log(err);
        });
    },
    openlook(row) {
      console.log(row);
      this.lookshow = true;
      this.lookArticle(row.id);
    },
    lookArticle(id) {
      lookArticle({
        article_id: id
      })
        .then(res => {
          this.lookinfo = res.data;
          console.log("this.lookinfo", this.lookinfo);
          console.log("this.options", this.options);
          const array = [];
          this.options.forEach(function(val, index, arr) {
            array.push(...arr[index].data);
          });
          // console.log(array);
          var filterArr = array.filter(e => e.id === this.lookinfo.type);
          console.log("filterArr", filterArr[0]);
          this.lookinfo.classname = filterArr[0].class_name;
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 删除分类
    delclass(row) {
      console.log(row);
      delArtClass({
        class_id: row.id
      })
        .then(res => {
          this.$message.success(res.msg);
          console.log(res);
          this.getArticleClassList();
        })
        .catch(err => {
          this.$message.error(err.msg);
          console.log(err);
        });
    },
    // 删除文章
    del(row) {
      console.log(row);
      delArticle({
        article_id: row.id
      })
        .then(res => {
          this.form = {};
          this.dialogFormVisible = false;
          this.$message.success(res.msg);
          console.log(res);
          this.getArticleList();
        })
        .catch(err => {
          this.$message.error(err.msg);
          this.dialogFormVisible = false;
          console.log(err);
        });
    },
    // setinfo() {
    //   editor.txt.html("<p>用 JS 设置的内容</p>");
    // },
    // 富文本change事件
    getEditor(value) {
      console.log(value);
      this.form.content = value;
      console.log(this.form.content);
    },
    //获取富文本
    // getTinContent() {
    //   var rs = this.$refs.tin.getContent();
    //   console.log(rs);
    // },
    handleClose() {
      // this.form = {};
      this.resetForm("ruleForm");
      this.form = this.$options.data().form;
      // console.log(this.form);
      this.dialogFormVisible = false;
      this.classshow = false;
      this.lookshow = false;
    },
    submitForm(formName) {
      console.log("表单内容", this.form);
      this.$refs[formName].validate(valid => {
        console.log("valid", valid);
        if (valid) {
          // 新增
          if (this.isadd === true) {
            console.log("form", this.form);
            doAddArticle({
              title: this.form.title,
              content: this.form.content,
              type: this.form.id
            })
              .then(res => {
                this.form = {};
                this.dialogFormVisible = false;
                this.$message.success(res.msg);
                console.log(res);
                this.getArticleList();
              })
              .catch(err => {
                this.$message.error(err.msg);
                this.dialogFormVisible = false;
                console.log(err);
              });
          }
          // 修改
          if (this.isadd === false) {
            console.log("form", this.form);
            updateArticle({
              article_id: this.arid,
              title: this.form.title,
              content: this.form.content,
              type: this.form.type
            })
              .then(res => {
                console.log(res);
                this.form = {};
                this.$message.success(res.msg);
                this.dialogFormVisible = false;
                this.getArticleList();
              })
              .catch(err => {
                this.dialogFormVisible = false;
                this.$message.error(err.msg);
                console.log(err);
              });
          }
        } else {
          this.$message.error("请检查表单!");
        }
      });
    },
    openDialog(row) {
      this.dialogFormVisible = true;
      this.isadd = true;
      this.form = this.$options.data().form;
      if (row !== 1) {
        this.isadd = false;
        // this.resetForm("ruleForm");
        console.log(row);
        // this.form = row;
        this.form.id = row.id;
        this.form.type = row.type;
        this.form.title = row.title;
        this.form.content = row.content;
        this.arid = row.id;
      }
      console.log(this.$refs);

      // this.$refs.weditor.setText("6666");
    },
    getArticleList() {
      this.loading = true;
      getArticleList({
        page: 1,
        pagesize: 15
      })
        .then(res => {
          this.loading = false;
          console.log("文章列表", res.data);
          this.tableData = res.data.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      console.log(this.form);
    },
    // 表头背景色
    headClass() {
      return "text-align: center;background:#eef1f6;";
    },
    // 表格样式设置
    rowClass() {
      return "text-align: center;";
    },
    // 表格选中行高亮
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },

    // 导航栏切换
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
};
</script>

<style lang="less" scoped>
.articlemanage {
  // width: 970px;
  box-sizing: border-box;
  // .articlemanage_main::v-deep {
  //   width: 970px;
  // }
}
</style>
